<template>
  <el-table
    :data="tableData"
    style="width: 100%; text-align: center"
    fit
    highlight-current-row
  >
    <el-table-column prop="number" label="试题编号"> </el-table-column>
    <el-table-column prop="subject" label="学科"> </el-table-column>
    <el-table-column prop="city" label="目录"> </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      :formatter="formatQuesType"
    >
    </el-table-column>
    <el-table-column prop="question" label="题干">
      <template slot-scope="{ row }">
        <!-- v-html可以解析标签 -->
        <p v-html="row.question"></p>
      </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间">
      <template slot-scope="{ row }">
        {{ row.addDate | parseTimeByString }}
      </template>
    </el-table-column>
    <el-table-column prop="difficulty" label="难度" :formatter="formatDiff">
    </el-table-column>
    <el-table-column prop="creator" label="录入人"> </el-table-column>

    <el-table-column
      prop="chkState"
      label="审核状态"
      :formatter="formatChkType"
    >
    </el-table-column>
    <el-table-column prop="chkRemarks" label="审核意见"> </el-table-column>
    <el-table-column prop="chkUser" label="审核人"> </el-table-column>
    <el-table-column
      prop="publishState"
      label="发布状态"
      :formatter="formatPublishType"
    >
    </el-table-column>

    <el-table-column label="操作" fixed="right" width="250px" align="center">
      <template slot-scope="{ row }">
        <Dialog
          ref="preview"
          :showDialog.sync="showDialog"
          :questionId="row.id"
          :questionData="questionData"
          :radio="radio"
          :checkBox="checkBox"
        />
        <el-button type="text" @click="getQuestionDetail(row.id)"
          >预览</el-button
        >
        <el-button
          type="text"
          @click="auditOpinions(row.id)"
          :disabled="row.chkState == 0 ? false : true"
          >审核</el-button
        >
        <el-button type="text" @click="routeJump(row)">修改</el-button>
        <el-button type="text" @click="choicePublish(row)">{{
          row.publishState == 1 ? "下架" : "上架"
        }}</el-button>
        <el-button
          type="text"
          @click="remove(row)"
          :disabled="row.publishState == 1"
          >删除</el-button
        >

        <!-- 试题审核弹框 -->
        <el-dialog
          title="试题审核"
          :visible.sync="dialogFormVisible"
          :append-to-body="true"
          width="400px"
        >
          <el-form ref="form" :model="form" :rules="formRules">
            <el-form-item>
              <el-radio-group v-model="form.chkState">
                <el-radio label="1">通过</el-radio>
                <el-radio label="2">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item prop="chkRemarks">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.chkRemarks"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="end" slot="footer" class="dialog-footer">
            <el-button @click="isCancel">取 消</el-button>
            <el-button type="primary" @click="isOk">确 定</el-button>
          </el-row>
        </el-dialog>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
import Dialog from "./Hdialog.vue";
import {
  detail,
  choice,
  auditOpinions,
  choiceCheck,
  choicePublish,
  remove,
} from "@/api/hmmm/questions";
import {
  questionType,
  difficulty,
  chkType,
  publishType,
} from "@/api/hmmm/constants.js";
export default {
  components: { Dialog },
  props: ["tableData"],
  data() {
    const validatechk = (rule, value, callback) => {
      if (value === "") {
        this.$message.warning("请输入审核意见");
      } else {
        callback();
      }
    };
    return {
      showDialog: false,

      questionData: {}, //题目信息
      radio: "", // 单选
      checkBox: [], // 多选

      formId: {},
      form: {
        chkState: "1",
        chkRemarks: "",
      },
      dialogFormVisible: false,

      formRules: {
        chkRemarks: [{ validator: validatechk, trigger: "blur" }],
      },
    };
  },
  created() {
    // this.getQuestionDetail();
  },
  methods: {
    //   预览弹层
    async getQuestionDetail(id) {
      //   const { data: res } = await choice({ id });
      const { data: res } = await detail({ id });
      this.questionData = res;
      //   console.log(this.questionData)
      this.radio = res.options.find((item) => item.isRight === 1).title;
      this.checkBox = res.options
        .filter((item) => item.isRight === 1)
        .map((item) => item.title);

      this.showDialog = true;
    },

    // 格式化题型
    formatQuesType(row, column, cellValue, index) {
      const obj = questionType.find(
        // 让两边数据类型相等 避免字符串和数字类型无法比较
        (item) => item.value * 1 === cellValue * 1
      );
      return obj.label;
    },
    // 格式化难度
    formatDiff(row, column, cellValue, index) {
      const obj = difficulty.find(
        // 让两边数据类型相等 避免字符串和数字类型无法比较
        (item) => item.value * 1 === cellValue * 1
      );
      return obj.label;
    },
    // 格式化审核状态
    formatChkType(row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value * 1 === cellValue * 1);
      return obj.label;
    },
    // 格式化发布状态
    formatPublishType(row, column, cellValue, index) {
      const obj = publishType.find((item) => item.value * 1 === cellValue * 1);
      return obj.label;
    },
    // 试题审核
    async auditOpinions(id, chkState) {
      this.formId.id = id;
      //   console.log(this.formId.id);
      this.dialogFormVisible = true;
    },
    // 审核/确定
    async isOk() {
      try {
        await this.$refs.form.validate();
        this.form.chkState *= 1;
        await choiceCheck({ ...this.form, ...this.formId });
        this.$message.success("操作成功");
        this.$emit("ChoiceList");
        this.isCancel();
      } catch (error) {
        console.log(error);
      }
    },
    // 审核/取消
    isCancel() {
      this.dialogFormVisible = false;
      //   this.$refs.form.resetFields();
      this.form = {
        chkState: "1",
        chkRemarks: "",
      };
    },
    // 上下架
    choicePublish(data) {
      const str = data.publishState * 1 !== 1 ? "上架" : "下架";
      this.$confirm(`您确认${str}这道题目吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          data.publishState * 1 !== 1
            ? (data.publishState = 1)
            : (data.publishState = 0);
          await choicePublish(data);

          data.publishState * 1 !== 1
            ? this.$message.success("下架成功")
            : this.$message.success("上架成功");
          this.$emit("ChoiceList");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除
    remove(data) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove(data);
          this.$message.success("删除成功");
          this.$emit("ChoiceList");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    routeJump(row) {
      this.$router.push({ path: "new", query: { id: row.id } });
    },
  },
};
</script>
 
<style></style>